<template>
	<view class="main">
		<view class="head" @click="goPay">
			<image class="logo" src="/static/logo.jpg"></image>
			<text class="title">貂蝉到家</text>
		</view>
		<view class="content">
			<image class="bg" src='/static/WechatIMG260.jpg' style="width: 100%;" mode="widthFix"></image>
			<view class="container">
				<view class="title">
					貂蝉到家
				</view>
				<view class="subtitle">
					足不出户享受便捷舒适的
					<text class="server">推拿服务</text>
				</view>
				<view class="text">
					貂蝉到家服务于2018年成立，是国内领先的上门推拿O2O服务平台，提供专业、正规、安全、便捷的24小时上门推拿服务。经过7年的沉淀积累，已经有不少消费者选择貂蝉到家平台，并且拥有了一批忠实稳定的客户。截止至2025年3月，貂蝉到家已经在全国54个城市设立运营中心，在全国142座城市提供24小时上门推拿服务。貂蝉到家服务支持微信公众号、客户端等渠道进行预约，足不出户即可享受舒适便捷的上门推拿服务。
				</view>
				<view class="banner">
					<image :src="banner[index]" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="explain">
				<view @click="goTermService">服务条款</view>
				<view @click="goPrivacy">隐私说明</view>
				<view @click="goConvention">上门按摩服务行业平台公约</view>
			</view>
			<view>
				Copyright © 2019-2025 重庆淼森信息技术有限责任公司 版权所有
			</view>
			<view>
				统一社会信用代码：91500103MAD0YH598T
			</view>
			<view>
				鄂ICP备2023008876号    鄂ICP备2023008876号-1
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				banner: [
					'https://www.diaochan88.com/images/h5-app3-1.png',
					'https://www.diaochan88.com/images/h5-app3-2.png',
					'https://www.diaochan88.com/images/h5-app3-3.png'
				]
			}
		},
		onLoad() {
			this.getBanner()
		},
		methods: {
			goPay(){
				uni.navigateTo({
					url: "/pages/index/payment"
				})
			},
			goConvention(){
				uni.navigateTo({
					url: "/pages/index/platform_convention"
				})
			},
			goPrivacy(){
				uni.navigateTo({
					url: "/pages/index/privacy_statement"
				})
			},
			goTermService(){
				uni.navigateTo({
					url: "/pages/index/term_service"
				})
			},
			getBanner(){
				setInterval(()=>{
					this.index++
					if(this.index > 2){
						this.index = 0
					}
				}, 2000)
			}
		}
	}
</script>

<style lang="scss">
	.head{
		display: flex;
		align-items: center;
		padding: 40rpx;
		.logo{
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}
		.title{
			font-size: 40rpx;
		}
	}
	.content{
		position: relative;
		.bg{
			position: absolute;
			z-index: -1;
		}
		.container{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 40rpx;
		}
		.title{
			font-size: 66rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.subtitle{
			font-size: 42rpx;
			.server{
				font-size: 38rpx;
				background-color: green;
				color: #fff;
				padding: 0rpx 20rpx;
				border-radius: 8rpx;
			}
		}
		.text{
			margin-top: 30rpx;
			font-size: 24rpx;
		}
		.banner{
			margin-top: 40rpx;
		}
	}
	.foot{
		color: #fff;
		background-color: #000;
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 20rpx;
		color: #ccc;
		.explain{
			margin-bottom: 20rpx;
			color: green;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			view:nth-child(1){
				padding-right: 20rpx;
				border-right: 1px solid rgba(204, 204, 204, 0.3);
			}
			view:nth-child(2){
				padding-left: 20rpx;
				padding-right: 20rpx;
				border-right: 1px solid rgba(204, 204, 204, 0.3);
			}
			view:nth-child(3){
				padding-left: 20rpx;
			}
		}
	}
</style>
